<template>
  
	<div>
		<div class="main-body">
  			<h3 class="main-body__title text-left">
  				基本资料
  				<div class="btn-area">
					<button v-if="formStatus == 'look'" class="btn btn-primary" @click.stop="submit()">编辑资料</button>
					<template v-else>
						<button class="btn btn-primary--empty">放弃</button>
						<button class="btn btn-primary" @click.stop="submit()">提交</button>
					</template>
				</div>
  			</h3>
  			<div class="main-body__content">
	  			<div class="main-body__content text-left">
					<div class="form form-horizontal">
						<div class="form-group" :class="{'form-group--error':$v.formData.ins_name.$error}">
							<label class="control-label col-sm-2">企业名称</label>
							<div class="col-sm-7">
								<input type="text" v-model.trim="formData.ins_name" @input="$v.formData.ins_name.$touch()" class="form-control" >
							</div>
						</div>
						<div class="form-group" :class="{'form-group--error':$v.formData.ins_address.$error}">
							<label class="control-label col-sm-2">企业地址</label>
							<div class="col-sm-7">
								<input type="text" v-model.trim="formData.ins_address" @input="$v.formData.ins_address.$touch()"  class="form-control" placeholder="" >
							</div>
						</div>
						<div class="form-group" :class="{'form-group--error':$v.formData.contact_name.$error}">
							<label class="control-label col-sm-2">联系人</label>
							<div class="col-sm-7">
								<input type="text" v-model.trim="formData.contact_name" @input="$v.formData.contact_name.$touch()"  class="form-control" placeholder="" >
							</div>
						</div>
						<div class="form-group" :class="{'form-group--error':$v.formData.telephone.$error}">
							<label class="control-label col-sm-2">联系方式</label>
							<div class="col-sm-7">
								<input type="text" v-model.trim="formData.telephone" @input="$v.formData.telephone.$touch()"  class="form-control" placeholder="" >
							</div>
						</div>
					</div>
				</div>
  			</div>
  		</div>
	</div>

</template>
<script>

import { required } from 'vuelidate/lib/validators'

  export default {
    name:'info',
    data(){
      return {
      	formStatus:'look',
      	formData:{ins_name:'',ins_address:'',contact_name:'',telephone:''}
      }
    },
    validations:{
    	formData:{
    		ins_name:{required},
    		ins_address:{required},
    		contact_name:{required},
    		telephone:{required}
    	}
    },
    methods:{
    	submit(){
    		let $v = $.extend( true,{},this.$v.formData )

			this.$v.formData.$touch();

    	}
    },
    mounted(){
    	$( this.$el ).find('input').attr('disabled','true')
    }
  }
</script>
<style scoped lang="less">
	@import '../../assets/style/color';

  	.form-group{
		margin-bottom:33px;
		&.form-group--error{
			.form-control{
				border-color:@cl_ff6537;
			}
		}
		.shadow-file{
			position: absolute;
			top:15px;
			left: 44%;
		}
		.fa{
			color:@cl_2b98f0;
		}
	}
</style>